<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    #main{
        width: 400px;
        height: 600px;
        background: url("images/background_1.jpg") no-repeat;
        background-size: 100% 100%;
        margin: 20px auto;
        position: relative;
        overflow: hidden;
    }
    #titleScore{
        font-size:18px;
        font-weight: bold;
        position: absolute;
        margin-top: 5px;
        margin-left: 5px;
        color: #ffffff;
        z-index: 2;

    }
    #stopgame{
        width: 35px;
        height: 35px;
        border: 3px solid #333;
        color: #333;
        border-radius: 40px;
        text-align: center;
        line-height: 32px;
        float: right;
        margin-right: 10px;
        margin-top: 10px;
        cursor: pointer;
        font-weight: bolder;
    }
     #stop{
         width: 400px;
         height: 400px;
         padding-top: 200px;
         position: absolute;
         z-index: 10;
         background-color: rgba(0, 0,0, 0.6);
         left: 50%;
         margin-left: -200px;
         top: 20px;
          display: none; 
     }
     .button{
         width: 150px;
         height: 50px;
         color: #ffffff;
         background-color: rgba(0, 0,0, 0.6);
         text-align: center;
         line-height: 50px;
         border-radius: 20px;
         font-size: 20px;
         font-weight: bolder;
         margin: 0 auto;
         margin-top: 10px;
         cursor: pointer;
     }
     .kongzhi{
         text-align: center;
     }
    
    </style>
</head>
<body>
   <div id="main">
       <div id="titleScore">
           <div>杀敌：<span id="killNum">0</span></div>
           <div>分数：<span id="killScore">0</span></div>
           <div>玩家血量：<span id="playBlood">5</span></div>
       </div>
       <div id="stopgame" onclick="mystopgame()">||</div>
   </div>
   <div id="stop">
        <div class="button" onclick="continuegame()">继续游戏</div>
        <div class="button"  onclick="newgame()">新的游戏</div>
        <div class="button"  onclick="closegame()">退出游戏</div>
   </div>
   <p class="kongzhi">键盘上下左右控制，空格键开枪</p>
   <!-- 音效 -->
<!-- <audio src="//music.163.com/outchain/player?type=2&id=32737993&auto=1&height=66" id="startmusic">
    
</audio> -->

   <script>
    var mainObj=document.getElementById("main");
    var smallPlaneArray=[];//敌方飞机数组
    var bulletArray=[];//子弹数组
    var upBtn=false;//按键开关
    var rightBtn = false;
    var leftBtn = false;
    var downBtn=false;
    var shootBtn=false;//发射状态

    var startMusic=document.getElementById("startmusic");
   
    var player = new playerPlaneProto("images/wanjia.png", 50, 480, 10);
    var smallplaneTimer=setInterval(createSmallplane, 50);//创建敌方飞机
    var PlaneMoveTimer=setInterval(smallPlaneMove, 50);//飞机移动
    var ctrlPlayTimer=setInterval(ctrlPlay, 30);//监听键盘
    var bulletMoveTimer=setInterval(bulletMove, 10);//子弹移动
    var crashCheckTimer=setInterval(crashCheck, 50);//判断碰撞

    var stop=document.getElementById("stop");//界面
    //暂停按钮
    function mystopgame() {
            var stop = document.getElementById("stop");
            stop.style.display = "block";
            clearInterval(smallplaneTimer);
            clearInterval(PlaneMoveTimer);
            clearInterval(ctrlPlayTimer);
            clearInterval(bulletMoveTimer);
            clearInterval(crashCheckTimer);
        }
        //继续游戏
        function continuegame(){
            stop.style.display="none";
            smallplaneTimer = setInterval(createSmallplane, 50);//创建敌方飞机
            PlaneMoveTimer = setInterval(smallPlaneMove, 50);//飞机移动
            ctrlPlayTimer = setInterval(ctrlPlay, 30);//监听键盘
            bulletMoveTimer = setInterval(bulletMove, 10);//子弹移动
            crashCheckTimer = setInterval(crashCheck, 50);//判断碰撞
        }
    //新游戏
    function newgame() {
        stop.style.display="none";
        mainObj.removeChild(player.imgNode);
        player=null;
        for(var i=0;i<smallPlaneArray.length;i++){
            mainObj.removeChild(smallPlaneArray[i].imgNode);
        }
        smallPlaneArray.splice(0,smallPlaneArray.length);
        for(var i=0;i<bulletArray.length;i++){
            mainObj.removeChild(bulletArray.imgNode);
        }
        bulletArray.splice(0,bulletArray.length);
        killNum.innerHTML=0;
        killScore.innerHTML=0;
        smallplaneTimer = setInterval(createSmallplane, 50);//创建敌方飞机
        PlaneMoveTimer = setInterval(smallPlaneMove, 50);//飞机移动
        ctrlPlayTimer = setInterval(ctrlPlay, 30);//监听键盘
        bulletMoveTimer = setInterval(bulletMove, 10);//子弹移动
        crashCheckTimer = setInterval(crashCheck, 50);//判断碰撞
        player = new playerPlaneProto("images/wanjia.png", 50, 480, 10);
    }
    //杀敌数
    var killNum=document.getElementById("killNum");
    var killScore=document.getElementById("killScore");
//敌方小飞机

/*
属性：
    图片节点 imgNode
    图片  ingSrc
    x坐标 x
    y坐标 y
    速度  speed
    行为 init
        移动
        初始化把图片节点添加到main里面
    
*/

function SmallPlaneProto(imgSrc,x,y,speed) {
    this.imgNode=document.createElement("img");
    this.imgSrc=imgSrc;
    this.x=x;
    this.y=y;
    this.isDaed=false;//敌方飞机是否存活
    this.exTime=20;//敌方小飞机死亡倒计时
    this.speed=speed;
    this.init=function(){
        this.imgNode.src=this.imgSrc;
        this.imgNode.style.position="absolute";
        this.imgNode.style.left=this.x+"px";
        this.imgNode.style.top=this.y+"px";
        mainObj.appendChild(this.imgNode);
    }
    this.init();

    //速度
    this.move=function(){
        this.imgNode.style.top=parseInt(this.imgNode.style.top)+this.speed+"px";
    }
}  
function  createSmallplane() {
    var smallPlane=new SmallPlaneProto("images/feiji1.png",parseInt(Math.random()*250),-parseInt(Math.random()*100+40),parseInt(Math.random()*10)+1)

    smallPlaneArray.push(smallPlane);

}

function  smallPlaneMove() {
    for (var i=0;i<smallPlaneArray.length;i++){
        if(smallPlaneArray[i].isDaed==false){
            //活着的时候才能移动
            smallPlaneArray[i].move();
            if (parseInt(smallPlaneArray[i].imgNode.style.top) >= 600) {
                mainObj.removeChild(smallPlaneArray[i].imgNode);
                smallPlaneArray.splice(i, 1);
            }
        }else {
            //死亡时每隔50毫秒-1
            smallPlaneArray[i].exTime--;
            if(smallPlaneArray[i].exTime==0){
             mainObj.removeChild(smallPlaneArray[i].imgNode);
            smallPlaneArray.splice(i, 1);
            }
        }
        
    }
    
}


//玩家飞机
/*
属性：
    图片节点 
    图片  
    x坐标 x
    y坐标 y
    速度  speed
    行为 init
        移动上下左右
        发射子弹
        初始化把图片节点添加到main里面
*/
function playerPlaneProto(imgSrc,x,y,speed) {
    this.imgNode=document.createElement("img");
    this.imgSrc=imgSrc;
    this.x=x;
    this.y=y;
    this.speed=speed;
    this.init=function(){
        this.imgNode.src=this.imgSrc;
        this.imgNode.style.position="absolute";
        this.imgNode.style.left=this.x+"px";
        this.imgNode.style.top=this.y+"px";
        mainObj.appendChild(this.imgNode);
    }
    this.init();
    //根据玩家按键执行事件
    this.moveLeft=function(){
        if(this.imgNode.style.left=="-120px"){
            this.imgNode.style.left="440px";
        }else{
                this.imgNode.style.left=parseInt(this.imgNode.style.left)-this.speed+"px";
             }
    }
    this.moveRight = function () {
          if (this.imgNode.style.left == "440px") {
            this.imgNode.style.left = "-120px";
        } else {
                 this.imgNode.style.left = parseInt(this.imgNode.style.left) + this.speed + "px";
                }
    }
    this.moveDown = function () {
        if(this.imgNode.style.top=="480px"){
            this.imgNode.style.top="480px";
        }else{
        this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + "px";
            }
    }
    this.moveUp = function () {
        if (this.imgNode.style.top=="0px") {
            this.imgNode.style.top=="0px"
        }else{

        this.imgNode.style.top = parseInt(this.imgNode.style.top)- this.speed + "px";
            }
    }

    //发射子弹
    this.shoot=function(){
        var newBullet=new bulletProto("images/bullet1.png",parseInt(this.imgNode.style.left)+52,parseInt(this.imgNode.style.top)-30,10);
        bulletArray.push(newBullet);
    }

   
}
   
//按下键盘移动飞机
document.body.onkeydown=function(){
    var e=window.event||arguments[0];
    //console.log(e);
    if(e.keyCode==37){
      
        leftBtn=true;
    }
     if (e.keyCode == 38) {
        upBtn=true;
    }
     if (e.keyCode == 39) {
        rightBtn=true;
    }
      if (e.keyCode == 40) {
        downBtn=true;
    }
        //飞机子弹空格
        if (e.keyCode==32) {
           shootBtn=true;
        }
}
document.body.onkeyup=function(){
    var e = window.event || arguments[0];
    //console.log(e);
    if (e.keyCode == 37) {

        leftBtn = false;
    }
    if (e.keyCode == 38) {
        upBtn = false;
    }
    if (e.keyCode == 39) {
        rightBtn = false;
    }
    if (e.keyCode == 40) {
        downBtn = false;
    }
    if(e.keyCode==32){
        shootBtn=false;
    }
    
}

function ctrlPlay() {
    if(leftBtn){
        player.moveLeft();
    }
    if(rightBtn){
        player.moveRight();
    }
    if(upBtn){
        player.moveUp();
    }
    if(downBtn){
        player.moveDown();
    }
    if(shootBtn==true){
        player.shoot();
        zdMusic.play();
    }
}


//子弹模板
function bulletProto(imgSrc,x,y,speed) {
    this.imgNode = document.createElement("img");
    this.imgSrc = imgSrc;
    this.x = x;
    this.y = y;
    this.speed = speed;
    this.init = function () {
        this.imgNode.src = this.imgSrc;
        this.imgNode.style.position = "absolute";
        this.imgNode.style.left = this.x + "px";
        this.imgNode.style.top = this.y + "px";
        mainObj.appendChild(this.imgNode);
    }
    this.init();
    this.move=function(){
        this.imgNode.style.top=parseInt(this.imgNode.style.top)-this.speed+"px";
    }
}

//子弹移动
function bulletMove() {
    for(var i=0;i<bulletArray.length;i++){
        bulletArray[i].move();
         if (parseInt(bulletArray[i].imgNode.style.top) <= 0) {
            mainObj.removeChild(bulletArray[i].imgNode);
            bulletArray.splice(i, 1);
        }
    }
}


//碰撞函数
function crashCheck(){
    for(var i=0;i<smallPlaneArray.length;i++){
        for(var j=0;j<bulletArray.length;j++){
            //子弹左边
            var btLeft=parseInt(bulletArray[j].imgNode.style.left);
            //子弹顶部
            var btTop=parseInt(bulletArray[j].imgNode.style.top);
            //敌军飞机顶部
            var plTop=parseInt(smallPlaneArray[i].imgNode.style.top);
            //敌军左边
            var plLeft=parseInt(smallPlaneArray[i].imgNode.style.left);

            //如果敌方飞机活着
        if (smallPlaneArray[i].isDaed==false) {
               if (btLeft >= plLeft && btLeft <= plLeft + 128 && btTop >= plTop && btTop < plTop + 128) {
                //碰撞之后移除子弹
                mainObj.removeChild(bulletArray[j].imgNode);
                bulletArray.splice(j, 1);
                //敌方飞机更换图片
                smallPlaneArray[i].imgNode.src = "images/b5.gif";
                //把敌方小飞机的存活状态设置为死亡
                smallPlaneArray[i].isDaed=true;

                //杀敌积分
                killNum.innerHTML=parseInt(killNum.innerHTML) + 1;
                killScore.innerHTML=parseInt(killScore.innerHTML)+5;

            }
        }
    
      
        }
    }
}

   </script>
</body>
</html>